﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title></title>
	<script type="text/javascript" src="js/vue2.js"></script>
	<style type="text/css">
		.red{color:#f00;}
		.gray{background:#ccc;}
	</style>
</head>
<body>
	<script type="text/javascript" src="js/vue1.js"></script>
	<!-- 数据绑定时出现的代码闪烁（看得到{}），消除闪动可以用v-cloak（这个在style需要写：[v-cloak]{display: none;}），v-text，v-html -->
	<!-- 例子2和例子3实现的效果是一样的，而例子1在vuejs解析{{price}}之前，用户是可以看到"{{price}}"这个字符串的。而例子2和例子3不会有这种闪烁的情况。 -->
	<span>{{price}}</span> 
	<span v-bind="price"></span>
	<span v-cloak>{{price}}</span>
	<div id="box1">{{msg}}
		<br />
		<input type="" v-model="msg"/>
		<br />
		{{arr}}
		<br />
		{{msg2}}
		<br />
		<ul>
			<li v-for="value in arr">{{value}}</li>  <!--  repeat低版本可以 高版本用for-->
		</ul>
		<ul>
			<li v-for="(v,index) in arr">{{v}}--{{index}}</li>  <!--  repeat低版本可以 高版本用for {{index}}为索引可能是版本问题,json里的key值也是，之前的为$index $key可以直接显示-->
		</ul>
		<ul>
			<li v-for="(v,k,i) in json">{{v}}---{{k}}---{{i}}</li>  <!--  -->
		</ul>
		<!-- 事件 -->
		<input type="button" value="btn" v-on:click="a=flase"/>  <!--mouseover.mouseout都行-->
		<div style="width:60px;height:60px;background:#f00;" v-show="a"></div>
		
		<!-- 事件深入 -->
		<!-- <div id="box2" @click="show2()">
			<button @click="show($event)">阻止冒泡</button>  
		</div> -->
		<div id="box2" @click="show2()">
			<button @click.stop="show()">阻止冒泡</button>
		</div>
		<div id="box2" @click="show2()">
			<button @contextmenu.prevent="show()">取消默认行为</button> <!--这个是阻止右键 -->
			<button @submit.prevent="show()">取消默认行为</button>
		</div>
		<input type="" @keydown.up="tan($event)"/>  <!--@keyup.13 @keyup.enter @keyup.up @keyup.left都行-->
		
		<!-- <img v-bind:src="url" alt="" /> -->   <!-- <img v-bind:src="{{url}}" alt="" 低版本有这种写法，也能出来，但会报404错误/> -->
		<img :src="url" alt="" :width="w" :title="tit"/> <!--简写-->
		<!-- 添加样式 -->
		<p :class="[a,b]">添加样式</p>
		<p :class="{red:true,gray:true}">添加样式</p>
		<p :class="json" :style="{fontSize:'22px',fontWeight:'bold'}">添加样式</p>
		<p :class="json" :style="json2">添加样式</p>
		
		<input type="" v-model="msg" />
		<br />
		{{msg}}
		<br />
		<p v-once>{{msg}}</p>
		<!--{{*msg}} 带*的不匹配 好像高版本脚本不太一样-->
		<br />
		<p v-html="text">{{text}}</p>
		<!--{{{msg}}}  三个括号时是自动解析标签 只显示里面内容 高版本是上面一种-->
		<!-- 过滤器 -->
		
	</div>
	
	<div class="p">
		<p>{{message | uppercase}}</p>
		<p>{{message | sum}}</p>
	</div>
	<a href="">sssssssssss</a>
</body>
</html>